<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="btn">点我存储cookie</button>
  <script>
    /*
    cookie: 小甜饼，是浏览器存储数据的小文件。存放小数据的。大概是4k左右
        个数限制 50个，消耗性能，不安全。
        文件fs操作，把文件存储在服务器端
    */
    // js操作cookie
    // 一、存cookie ：cookie有域名限制的，一个域名下存储的只能这个域名下获取
    // localhost:8989 存的cookie ，只在一个浏览器里互相访问 。
    // 方式一： 设置cookie的过期时间，当期时间 + 过期时间 ，设置expires参数
    // cookie 是有时效性 ，默认是浏览器关闭的时候失效。
    let btn = document.querySelector(".btn");
    // btn.onclick = function () {
    //   let t = new Date();
    //   t.setHours(new Date().getHours() + 1) // 设置成当前时间 + 过期时间
    //   // 获取到当前时间 + 过期时间，转换成时间的字符串形式。
    //   document.cookie = `myname=chengyu;expires=${t.toUTCString()}`;
    // }

    // 方式二：直接设置过期时间，时间单位是秒。设置 Max-Age 参数
    btn.onclick = function () {
      console.log("出发了点击事件");
      document.cookie = `myname=xiaochen;Max-Age=3600`;
    }
  </script>
</body>

</html>